<template>
  <!-- 客情关怀任务统计报表 -->
  <div class="careTaskReportForm">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="date" label="关怀起止日期">
            <el-date-picker
              v-model="formData.date"
              type="daterange"
              opt
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item prop="seatsName" label="坐席姓名">
            <el-input v-model="formData.seatsName" clearable />
          </el-form-item>
          <el-form-item prop="seatsNo" label="坐席号">
            <el-input v-model="formData.seatsNo" clearable />
          </el-form-item>
          <el-form-item prop="customerType" label="客户类型">
            <el-select v-model="formData.customerType" multiple clearable>
              <el-option label="类型1" value="1" />
              <el-option label="类型2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item prop="careProject" label="关怀项目" multiple clearable>
            <el-select v-model="formData.careProject">
              <el-option label="项目1" value="1" />
              <el-option label="项目2" value="2" />
              <el-option label="项目3" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <ExportPane :table-config="tableConfig" :query-data-fun="queryHandle" filename="客情关怀报表">导出</ExportPane>
            <Button type="primary" :loading="loading" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :table-config="tableConfig" :other-filters="otherFilters">

      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import ExportPane from '@/components/ExportPane'
export default {
  name: 'ReportFormClientCareTask',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    ExportPane
  },
  data() {
    return {
      formData: {
        seatsName: '',
        seatsNo: '',
        customerType: [],
        careProject: [],
        date: []
      },
      formRules: {},
      otherFilters: [],
      loading: false,
      tableConfig: {
        interfacePath: '',
        pageFlag: false,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            type: 'index',
            align: 'center',
            formatData: function(val) {
              return val.keyIndex + 1
            }
          },
          {
            prop: 'seatsName',
            label: '坐席姓名'
          },
          {
            prop: 'customerType',
            label: '客户类型'
          },
          {
            prop: 'careProject',
            label: '关怀项目'
          },
          {
            prop: 'careTotal',
            label: '关怀总数'
          }

        ]
      }
    }
  },
  mounted() {},
  methods: {
    // 根据条件查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const list = []
        this.otherFilters = list
        if (type !== 'export') {
          this.$nextTick(() => {
            this.$refs.table.initTableData('opCondition')
          })
        }
        return list
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
